<template>
  <el-dialog
    v-model="visible"
    width="1520px"
    custom-class="patrolDialog"
    :title="config.title || ''"
    :lock-scroll="false"
    @close="config.close"
  >
    <el-form
      ref="ruleForm"
      :rules="rules"
      :label-width="config.labelWidth || '110px'"
      :model="dataForm"
      class="stepStore"
    >
      <el-form-item label="标准名称：" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>
      <div class="flexFromItem">
        <el-form-item label="要求：" style="width: 48%" prop="remark">
          <el-input v-model="dataForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="设备类型：" style="width: 48%" prop="deviceType">
          <el-select v-model="dataForm.deviceType" style="width: 100%" placeholder="请选择设备类型">
            <el-option label="管道" value="1"></el-option>
            <el-option label="物联网水表" value="2"></el-option>
            <el-option label="PLC" value="3"></el-option>
            <el-option label="压力计" value="4"></el-option>
            <el-option label="其他" value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div class="tableContainer">
      <el-button icon="iconfont icon--tainjia" size="mini" type="primary" @click="addStep"
        >添加步骤</el-button
      >
      <el-table
        ref="singleTable"
        class="stepTable"
        :data="dataForm.dataList"
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="no" width="78" align="center" label="序号"> </el-table-column>
        <el-table-column label="项目" width="300">
          <template #default="scope">
            <input
              v-model="scope.row.projectName"
              type="text"
              class="workContentInput"
              placeholder="请输入"
            />
          </template>
        </el-table-column>
        <el-table-column label="方法及基准">
          <template #default="scope">
            <input
              v-model="scope.row.method"
              type="text"
              class="workContentInput"
              placeholder="请输入"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="264">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              class="iconfont icon-shangyi"
              :style="{ color: '#4195F0', border: 'none' }"
              @click="setStep(scope.row, 'up')"
              >上移</el-button
            >
            <el-button
              type="text"
              class="iconfont icon-xiayi"
              size="small"
              :style="{ color: '#4195F0', border: 'none' }"
              @click="setStep(scope.row, 'down')"
              >下移</el-button
            >
            <el-button
              type="text"
              class="iconfont icon-shanchu1"
              size="small"
              :style="{ color: '#4195F0', border: 'none' }"
              @click="setStep(scope.row, 'del')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button size="mini" @click="config.close">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { saveStep, getStepDetail } from '@/api/patrol'
import useGlobal from '@/hooks/global/useGlobal'
const { $message, $confirm } = useGlobal()

export default {
  components: {},
  // eslint-disable-next-line vue/require-prop-types
  props: ['config'],
  data() {
    return {
      dataForm: { id: null, dataList: [] },
      rules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入任务要求', trigger: 'change' }],
        deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }]
      }
    }
  },
  computed: {
    visible() {
      return this.config.visible
    }
  },

  created() {
    this.init()
  },

  methods: {
    async init() {
      this.dataForm.id = this.config.currentId
      if (this.dataForm.id) {
        this.getDetail()
      } else {
        this.addStep()
      }
    },

    async getDetail() {
      try {
        const res = await getStepDetail(this.dataForm.id)
        this.dataForm = res.data
      } catch (err) {
        $message.error(err.data.message)
      }
    },

    addStep() {
      this.dataForm.dataList.push({
        no: this.dataForm.dataList.length + 1,
        projectName: '',
        method: ''
      })
    },

    setStep(step, option) {
      if (option === 'up') {
        // no     >0
        if (~~step.no === 1) return
        this.dataForm.dataList[step.no - 2].no++
        this.dataForm.dataList[step.no - 1].no--
        this.dataForm.dataList.sort((a, b) => a.no - b.no)
      } else if (option === 'down') {
        if (~~step.no === this.dataForm.dataList.length) return
        this.dataForm.dataList[step.no].no--
        this.dataForm.dataList[step.no - 1].no++
        this.dataForm.dataList.sort((a, b) => a.no - b.no)
      } else if (option === 'del') {
        $confirm('确定要删除该步骤吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataForm.dataList.splice(step.no - 1, 1)
          this.dataForm.dataList.forEach(item => {
            if (item.no > step.no) {
              item.no--
            }
          })
        })
      }
    },

    async submit() {
      console.log(this.dataForm)
      this.$refs['ruleForm'].validate(async valid => {
        if (!valid) {
          return false
        }

        try {
          const res = await saveStep(this.dataForm)
          if (res.status === 200) {
            $message.success('操作成功')
            this.$emit('refreshData')
            this.config.close()
          } else {
            $message.error('请求失败')
          }
        } catch (err) {
          $message.error(err.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.patrolDialog {
  .el-dialog__body {
    padding: 0 !important;
  }
  .iconfont::before {
    margin-right: 5px;
  }
  .el-input__inner {
    height: 40px !important;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__label {
    line-height: 40px;
    font-size: 16px;
  }
}
</style>

<style lang="scss" scoped>
.message-text {
  margin: 10px 0 12px 20px;
  color: #39b01c;
  line-height: initial;
}
.flexFromItem {
  display: flex;
  justify-content: space-between;
}
.stepStore {
  border-bottom: 1px solid #ebebeb;
  padding: 0 32px 12px;
}
.tableContainer {
  border-bottom: 1px solid #ebebeb;
  padding: 16px 32px 24px;
  .stepTable {
    margin-top: 16px;
  }
  .workContentInput {
    height: 40px;
    line-height: 40px;
    border: none;
    outline: none;
    width: 100%;
  }
}
</style>
